import { Button, NavBar } from 'antd-mobile'
import { useEffect, useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import styles from './address.module.scss'
import { getaddAddressList, type AddressData } from '../../api/ressService'
import { EditSOutline } from 'antd-mobile-icons'

const Index = () => {
    const nav = useNavigate()
    const location = useLocation() // 获取路由状态，用于判断是否从下单页跳转过来
    const [addressList, setAddressList] = useState<AddressData[]>([])
    
    // 获取地址列表
    const getList = async () => {
        const res = await getaddAddressList()
        console.log(res);
        setAddressList(res.data)
    }
    
    useEffect(() => {
        getList()
    }, [])
    
    // 处理地址点击事件 - 根据来源决定行为
    const handleAddressClick = (address: AddressData) => {
        // 如果是从下单页跳转过来的，则选择地址并返回
        if (location.state?.fromOrderPage) {
            nav('/addcode', { state: { selectdeId: address.id } })
        } else {
            // 否则，执行默认行为（跳转到编辑页）
            nav('/addAddress/true', { state: { addressId: address.id, addressData: address } })
        }
    }
    
    return (
        <div className={styles.addressbox}>
            <NavBar onBack={() => nav(-1)} className={styles.nav}>收货地址</NavBar>
            <main>
                {
                    addressList.length > 0 && addressList.map((item, ind) => (
                        <div 
                            key={ind} 
                            className={styles.addressItem}
                            onClick={() => handleAddressClick(item)} // 添加点击事件
                            style={{ cursor: 'pointer' }} // 添加指针样式
                        >
                            <div>
                                <p className={styles.ressName}>
                                    <span>{item.nickname}</span>
                                    <span>{item.tel}</span>
                                    {item.delivery && (
                                        <span style={{ 
                                            color: '#ff4d4f', 
                                            fontSize: 10, 
                                            marginLeft: 8,
                                            background: '#fff2f0',
                                            padding: '2px 6px',
                                            borderRadius: 4
                                        }}>
                                            默认地址
                                        </span>
                                    )}
                                </p>
                                <p className={styles.ressDetail}>
                                    <span>{item.provice_city_area}</span>
                                    <span>{item.detail_address}</span>
                                </p>
                            </div>
                            <div 
                                className={styles.ressIcon} 
                                onClick={(e) => {
                                    e.stopPropagation() // 阻止事件冒泡到父元素的onClick
                                    nav('/addAddress/true', { state: { addressId: item.id, addressData: item } })
                                }}
                            >
                                <EditSOutline />
                            </div>
                        </div>
                    ))
                }
            </main>
            <footer>
                <Button block size='large'
                    className={styles.addAddressBtn}
                    onClick={() => nav('/addAddress/false')}
                >
                    <p>
                        新增地址
                    </p>
                </Button>
            </footer>
        </div>
    )
}

export default Index
